<template>
  <div class="ac-wrap">
    <div class="sel">
      <span class="txt">活动名称</span>
      <input type="text" placeholder="活动名称" v-model="params.keyWord">
      <span class="txt">活动时间</span>
      <!-- <input class="ac-start-date" type="date" placeholder="选择开始日期" v-model="params.startTime">
      <input class="ac-end-date" type="date" placeholder="选择结束日期" v-model="params.endTime">-->
      <el-date-picker
        v-model="rangeTime"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        :picker-options="pickerOptions2"
      ></el-date-picker>
      <span class="txt">活动状态</span>
      <select type="text" placeholder v-model="changeStates">
        <option value="0">请选择</option>
        <option value="1">待合作</option>
        <option value="2">待审核</option>
        <option value="4">待报名</option>
        <option value="5">已成团</option>
        <option value="6">待签到</option>
        <option value="7">已结束</option>
        <option value="3">已驳回</option>
        <option value="8">已关闭</option>
      </select>
      <div class="sel-btn" @click="getAcList(changeStates)">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="ac-tabs">
      <div :class="states == 0 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(0)">全部</div>
      <div
        :class="states == 1 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(1)"
      >待合作</div>
      <div
        :class="states == 2 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(2)"
      >待审核</div>

      <div
        :class="states == 4 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(4)"
      >待报名</div>
      <div
        :class="states == 5 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(5)"
      >已成团</div>
      <div
        :class="states == 6 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(6)"
      >待签到</div>
      <div
        :class="states == 7 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(7)"
      >已结束</div>
      <div
        :class="states == 3 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(3)"
      >已驳回</div>
      <div
        :class="states == 8 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(8)"
      >已关闭</div>
    </div>
    <el-table :data="acList" stripe style="width: 100%">
      <el-table-column prop="serviceName" width="200" align="center" label="活动海报">
        <template slot-scope="scope">
          <div>
            <img
              :src="scope.row.activity_img"
              :style="{
            maxWidth: '100%',
            maxHeight: '100px',
            padding:'5px'
          }"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activity_title" label="活动标题" width="300" align="center"></el-table-column>
      <el-table-column label="已报名" align="center">
        <template slot-scope="scope">
          <div>
            <div
              v-if="scope.row.states == 4"
            >{{scope.row.signCount}}人（还差{{scope.row.participate_min - scope.row.signCount}}人成团）</div>
            <div v-else>{{scope.row.signCount}}</div>
          </div>
        </template>
      </el-table-column>
<el-table-column label="分成比例" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.fen }}%</div>
        </template>
</el-table-column>
      
      <el-table-column label="活动开始时间" width="200" align="center">
        <template slot-scope="scope">
          <div>{{setDate(scope.row.activity_time)}} {{setTime(scope.row.activity_time)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center">
        <template slot-scope="scope">
          <div v-if=" scope.row.states== 1">待合作</div>
          <div v-if=" scope.row.states== 2">待审核</div>
          <div v-if=" scope.row.states== 3">已驳回</div>
          <div v-if=" scope.row.states== 4">待报名</div>
          <div v-if=" scope.row.states== 5">已成团</div>
          <div v-if=" scope.row.states== 6">待签到</div>
          <div v-if=" scope.row.states== 7">已结束</div>
          <div v-if=" scope.row.states== 8">已关闭</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div>
                  <el-button @click="queryDetail( scope.row.id)" type="primary" size="mini" round >查看详情</el-button>
                </div>
                <div v-if="scope.row.states == 4 || scope.row.states == 6 || scope.row.states == 5" >
                  <el-button @click="showErCode(scope.row.id)" type="primary" size="mini" round >活动二维码</el-button>
                </div>
                <div v-if="scope.row.states == 1">
                  <el-button @click="cooperation(scope.row.id)" type="primary" size="mini" round >确认合作</el-button>
                </div>
                <div v-if="scope.row.states == 1">
                  <el-button @click="reject(scope.row.id)" type="primary" size="mini" round >驳回</el-button>
                </div>
                <div v-if="scope.row.states == 6">
                  <el-button @click="queryDetail(scope.row.id)" type="primary" size="mini" round >核销</el-button>
                </div>
              </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      background=""
      layout=" prev, pager, next"
      :total="pageTotal"
      style="text-align:center;margin:20px auto;"
    ></el-pagination>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      loading: false,
      rangeTime: [],
      pageTotal: 1,
      params: {
        page: 1,
        limit: 10,
        keyWord: "",
        startTime: "",
        endTime: "",
        states: "",
        partner: this.$store.state.partnerId
      },
      pickerOptions2: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let three = 90 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          // return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          return false;
        }
      },
      changeStates: 0,
      states: 0,
      acList: []
    };
  },
  watch: {
    rangeTime(val) {
      if (val && val.length === 2) {
        this.params.startTime = val[0];
        this.params.endTime = val[1];
      }
    }
  },
  methods: {
    showErCode(id) {
      let that = this;
      this.$alert(
        `<img src="${
          that.$store.state.url
        }/activity/getQrCode?id=${id}&userId=${that.$cookie.get("id")}">`,
        "活动二维码",
        {
          dangerouslyUseHTMLString: true
        }
      );
    },
    reject(id) {
      this.$prompt("驳回原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        axios({
          method: "post",
          url: `${this.$store.state.url}/activity/rejectActivity`,
          data: qs.stringify({
            id: id,
            // states: 2
            reject: value
          })
        }).then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.$alert("已驳回");
            this.getAcList();
          } else {
            // alert(res.data.msg);
            this.$alert("驳回失败");
          }
        });
      });
    },
    cooperation(id) {
      axios({
        method: "post",
        url: `${this.$store.state.url}/activity/updateStates`,
        data: qs.stringify({
          id: id,
          states: 2
        })
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          this.$store.state.fn.success(res.data.msg).then(() => {
            this.getAcList();
          });
        }
      });
    },
    /**
     * 分页
     */
    handleCurrentChange: function(index) {
      let that = this;
      that.params.page = index;
      that.getAcList();
    },
    /**
     *  查询活动列表
     */
    getAcList: function(num) {
      this.loading = true;
      this.acList = [];
      let that = this;
      that.params.states = num;
      that.states = num;
      if (num == 0) {
        that.params.states = "";
      }
      axios({
        method: "post",
        url: `${that.$store.state.url}/activity/selectActivityList`,
        data: qs.stringify(that.params)
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          that.pageTotal = res.data.count;
          that.acList = res.data.data;
          if (this.acList.length == 0) {
          }
        } else {
          // alert(res.data.msg);
          this.$alert(res.data.msg);
        }
      });
    },
    /**
     * 活动详情
     */
    queryDetail: function(id) {
      Global.activityId = id;
      this.$router.push({
        path: "/main/activityDetail",
        query: {
          id: id
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getAcList(0);
  }
};
</script>
<style scoped>
.titles {
  height: 62px;
  line-height: 62px;
  color: #778ca2ff;
  font-size: 14px;
  width: 100%;
  display: inline-block;
}
.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
  width: 42px;
}
.sel input {
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}
.sel-btn {
  color: #fff;
  width: 80px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
  margin-left: 37px;
  display: inline-block;
}
.sel select {
  width: 200px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
  margin-left: 17px;
  padding-left: 20px;
}
@media screen and (max-width: 1400px) {
  .sel input {
    width: 180px;
    margin: 0px;
  }
  .sel select {
    width: 180px;
    margin: 0px;
  }
  .sel-btn {
    margin: 0px;
  }
}

.show-menu {
  color: #4B74FF;
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
.ac-tabs {
  /* width: 1520px; */
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
  display: flex;
}
.ac-tabs > div {
  cursor: pointer;
  flex: 1;
}
.ac-title {
  line-height: 38px;
  box-sizing: border-box;
  /* margin-left: 100px; */
}
.ac-title-active {
  border-bottom: 2px solid #4b74ff;
  color: #4b74ff;
}
.ac-title:first-child {
  margin-left: 0;
}
</style>
